<template>
	<view>
		<view :style="{ position: 'absolute', height: data.listHeight }">
			<slot name="title"></slot>
		</view>

		<!-- 虚拟无限滚动列表 s -->
		<view
			class="infinite__list"
			:style="{
				opacity: loading ? 0 : 1,
				height: data.listHeight,
				'padding-top': pdTop
			}"
		>
			<!-- items s -->
			<view
				v-for="item in songs"
				:key="item.payload"
				class="player-detail__queue-li infinite__item"
				:class="{ 'queue-li-active': item.payload === playerStore.playerInfo.payload }"
				@tap="toPlayer(item)"
			>
				<image v-if="item.payload === playerStore.playerInfo.payload" class="player-detail__queue-li__poster" src="@/static/equaliser.svg" mode="aspectFit" />
				<image v-else class="player-detail__queue-li__poster" :src="item.picUrl + '?param=50y50'" mode="aspectFit" />
				<view class="player-detail__queue-li__info text-ellipsis-single">
					<view class="player-detail__queue-li__info-title text-ellipsis-single">
						{{ item.title }}
					</view>
					<view class="player-detail__queue-li__info-artist text-ellipsis-single">
						{{ item.artist }}
					</view>
				</view>
				<view class="player-detail__queue-li__handle" />
			</view>
			<!-- items e -->
		</view>
		<!-- 虚拟无限滚动列表 e -->
	</view>
</template>

<script>
export default {
	name: 'ThePlayerQueueInfinite',
	data() {
		return {
			loading: true,
			data: {
				// 截取数组的下标
				startIdx: 0,
				endIdx: 1,

				// 一页能显示的个数
				screenCount: 0,

				// 整个列表的总高度
				listHeight: '100%',

				// 每个li的高度
				unitHeight: 0,

				// 列表距离顶部的距离
				viewScrollTop: 0,

				// 滚动区域的高度
				scrollViewHeight: 0
			}
		};
	},
	props: {
		// 列表数据
		songs: {
			type: Array
		},
		// 父组件的scroll-view滚动条高度
		scrollTop: {
			type: Number
		}
	},
	watch: {
		songs: {
			immediate: true,
			handler(newValue) {
				if (newValue.length > 0) {
					this.$nextTick(() => {
						uni.createSelectorQuery()
							.in(this)
							.select('.infinite__list')
							.boundingClientRect((res) => {
								this.data.scrollViewHeight = res.height;
							})
							.exec();

						// 获取每首歌li的高度
						uni.createSelectorQuery()
							.in(this)
							.select('.infinite__item')
							.boundingClientRect((res) => {
								this.data.viewScrollTop = res.top > uni.getSystemInfoSync().screenHeight ? uni.getSystemInfoSync().screenHeight - res.top : res.top;
								this.data.unitHeight = res.height;
								this.data.listHeight = res.height * newValue.length + 'px';
								this.data.screenCount = this.data.endIdx = Math.ceil(this.data.scrollViewHeight / this.data.unitHeight);
								this.$nextTick(() =>
									setTimeout(() => {
										this.loading = false;
									}, 100)
								);
							})
							.exec();
					});
				}
			}
		},
		scrollTop: {
			immediate: true,
			handler(newValue) {
				if (this.scrollTop) {
					this.scrollHandler({ scrollTop: this.scrollTop });
				}
			}
		}
	},
	computed: {
		tempsongs() {
			return this.songs.slice(this.data.startIdx, this.data.endIdx);
		},
		pdTop() {
			const paddingTop = this.data.unitHeight * this.data.startIdx;
			return `${paddingTop}px`;
		},
		//访问player仓库
		playerStore() {
			return this.$store.state.player;
		}
	},
	methods: {
		scrollHandler(e) {
			const scrollTop = (e.scrollTop * 1000 - this.data.viewScrollTop * 1000) / 1000;

			// 提前渲染数量
			const preload = Math.ceil(this.data.screenCount / 2);

			let startIdx;
			let endIdx;

			if (scrollTop >= 0) {
				endIdx = Math.floor(scrollTop / this.data.unitHeight) + this.data.screenCount + preload;
				if (endIdx > this.songs.length) endIdx = this.songs.length;

				startIdx = endIdx - this.data.screenCount - 1 - preload * 2;
				if (startIdx < 0) startIdx = 0;
			} else {
				startIdx = 0;
				endIdx = this.data.screenCount + preload;
			}

			if (startIdx !== this.data.startIdx) this.data.startIdx = startIdx;
			if (endIdx !== this.data.endIdx) this.data.endIdx = endIdx;
		},
		toPlayer(data) {
			this.$store.dispatch('player/setPlayerInfo', data.payload);
		}
	}
};
</script>

<style lang="scss" scoped>
.infinite__list {
	box-sizing: border-box;
	transition: opacity 0.3s;
}

.player-detail__queue-li {
	height: 92rpx;
	width: 100%;
	display: flex;
	justify-content: space-between;
	padding: 7.7rpx 0;
	// 封面
	.player-detail__queue-li__poster {
		height: 92rpx;
		width: 92rpx;
		padding: 0;
		border-radius: 10rpx;
	}
	// 歌曲信息
	.player-detail__queue-li__info {
		flex: 1;
		padding: 0 33rpx;
		box-sizing: border-box;
		line-height: 1.6;
		.player-detail__queue-li__info-title {
			font-size: 32rpx;
			color: #fff;
			font-weight: 400;
		}
		.player-detail__queue-li__info-artist {
			font-size: 24rpx;
			color: rgb(232, 232, 232);
			font-weight: 400;
		}
	}
	// 拖动把手
	.player-detail__queue-li__handle {
		height: 92rpx;
		width: 92rpx;
		background-color: rgb(232, 232, 232);
		mask-size: 40%;
		mask-position: right center;
		mask-repeat: no-repeat;
		mask-image: url('@/static/ed5.png');
	}
}

// 正在播放的样式
.queue-li-active {
	// 封面
	.player-detail__queue-li__poster {
		height: 92rpx;
		width: 92rpx;
		border-radius: 10rpx;
		padding: 28rpx;
		box-sizing: border-box;
	}

	// 歌曲信息
	.player-detail__queue-li__info {
		.player-detail__queue-li__info-title {
			color: var(--theme-color);
		}
		.player-detail__queue-li__info-artist {
			color: var(--theme-color);
		}
	}
}
</style>
